{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收银台设置 - 现代智能收银系统</title>
    <!-- 引入Bootstrap CSS（本地静态文件） -->
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <!-- 引入Font Awesome（CDN） -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 自定义CSS -->
    <style>
        body {
            background-color: #f8f9fa;
            min-height: 100vh;
            padding-top: 2rem;
        }
        .card-shadow {
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        }
        .setting-item {
            margin-bottom: 1.5rem;
            padding-bottom: 1.5rem;
            border-bottom: 1px solid #e9ecef;
        }
        .setting-item:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }
        .settings-header {
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid #dee2e6;
        }
        .settings-header h1 {
            margin: 0;
            font-size: 1.75rem;
            color: #343a40;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card card-shadow">
                    <div class="card-header settings-header">
                        <div class="d-flex justify-content-between align-items-center">
                            <h1><i class="fa fa-cog fa-spin"></i> 收银台设置</h1>
                            <a href="{% url 'cashier_home' %}" class="btn btn-secondary" title="返回收银台首页">
                                <i class="fa fa-arrow-left"></i> 返回
                            </a>
                        </div>
                    </div>
                    <div class="card-body">
                        <form method="post">
                            {% csrf_token %}
                            <!-- 收银员信息 -->
                            <div class="setting-item">
                                <h4 class="text-muted mb-3"><i class="fa fa-user-circle"></i> 收银员信息</h4>
                                <div class="mb-3">
                                    <label for="cashier_name" class="form-label">收银员姓名</label>
                                    <input type="text" class="form-control" id="cashier_name" name="cashier_name" required placeholder="请输入收银员姓名">
                                </div>
                                <div class="mb-3">
                                    <label for="cashier_id" class="form-label">员工编号</label>
                                    <input type="text" class="form-control" id="cashier_id" name="cashier_id" required placeholder="请输入员工编号">
                                </div>
                            </div>
                            
                            <!-- 打印设置 -->
                            <div class="setting-item">
                                <h4 class="text-muted mb-3"><i class="fa fa-print"></i> 打印设置</h4>
                                <div class="mb-3">
                                    <label for="receipt_printer" class="form-label">收据打印机</label>
                                    <select class="form-select" id="receipt_printer" name="receipt_printer">
                                        <option value="default">默认打印机</option>
                                        <option value="usb_printer">USB打印机</option>
                                        <option value="network_printer">网络打印机</option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label for="print_copies" class="form-label">打印份数</label>
                                    <input type="number" class="form-control" id="print_copies" name="print_copies" min="1" max="5" value="1">
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="print_logo" name="print_logo" checked>
                                    <label class="form-check-label" for="print_logo">
                                        打印超市LOGO
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="print_qr" name="print_qr" checked>
                                    <label class="form-check-label" for="print_qr">
                                        打印支付二维码
                                    </label>
                                </div>
                            </div>
                            
                            <!-- 货币设置 -->
                            <div class="setting-item">
                                <h4 class="text-muted mb-3"><i class="fa fa-money"></i> 货币设置</h4>
                                <div class="mb-3">
                                    <label for="currency_format" class="form-label">货币格式</label>
                                    <select class="form-select" id="currency_format" name="currency_format">
                                        <option value="CNY">人民币 (¥)</option>
                                        <option value="USD">美元 ($)</option>
                                        <option value="EUR">欧元 (€)</option>
                                    </select>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="show_currency_symbol" name="show_currency_symbol" checked>
                                    <label class="form-check-label" for="show_currency_symbol">
                                        显示货币符号
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="rounding" name="rounding" checked>
                                    <label class="form-check-label" for="rounding">
                                        自动四舍五入到角
                                    </label>
                                </div>
                            </div>
                            
                            <!-- 按钮区域 -->
                            <div class="d-flex justify-content-between mt-4">
                                <button type="button" class="btn btn-outline-secondary" id="resetSettings">
                                    <i class="fa fa-refresh"></i> 重置
                                </button>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fa fa-save"></i> 保存设置
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 引入Bootstrap JS -->
    <script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
    <!-- 自定义脚本 -->
    <script>
        // 重置设置功能
        document.getElementById('resetSettings').addEventListener('click', function() {
            if (confirm('确定要重置所有设置吗？这将清除您当前的所有更改。')) {
                document.querySelector('form').reset();
            }
        });
        
        // 表单提交前的确认
        document.querySelector('form').addEventListener('submit', function(e) {
            if (!confirm('确定要保存这些设置吗？')) {
                e.preventDefault();
            }
        });
        
        // 添加简单的表单验证
        document.querySelector('form').addEventListener('submit', function(e) {
            const cashierName = document.getElementById('cashier_name').value;
            const cashierId = document.getElementById('cashier_id').value;
            
            if (!cashierName.trim()) {
                alert('请输入收银员姓名');
                e.preventDefault();
                document.getElementById('cashier_name').focus();
                return false;
            }
            
            if (!cashierId.trim()) {
                alert('请输入员工编号');
                e.preventDefault();
                document.getElementById('cashier_id').focus();
                return false;
            }
        });
    </script>
</body>
</html>